<!-- src/components/MyMap.vue -->
<template>
  <div>ref数据：{{ location }}</div>
  <div>reactive自己的只读数据：{{ fatherNoChange.own }}</div>
  <MyMarker />
</template>

<script>
import { provide, reactive, ref, readonly } from "vue";
import MyMarker from "./inject.vue";

export default {
  components: {
    MyMarker,
  },
  setup() {
    const location = ref("North Pole");
    const geolocation = reactive({
      longitude: 90,
      latitude: 135,
    });

    const fatherNoChange = reactive({
      own: "can·t change",
    });

    const updateLocation = () => {
      location.value = "South Pole  changeData";
    };

    // 提供给后代组件使用的属性和方法
    provide("location", location);
    provide("geolocation", geolocation);
    provide("updateLocation", updateLocation);
    provide("readonly", readonly(fatherNoChange));

    return {
      location,
      fatherNoChange,
      updateLocation,
    };
  },
};
</script>
